<template>
    <div class="container">
        <img :src="Lyrics.al.picUrl" alt="" class="bgimg">
        <!-- 头部 -->
        <div class="top">
            <div class="left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <!-- name -->
                <!-- 跑马灯效果 -->
                <Vue3Marquee class="marquee">
                    <div class="leftmarquee">
                        <div>
                            {{ Lyrics.name }} ---- 
                        </div> 
                        <span v-for="item in Lyrics.ar" :key="item.id"> {{ item.name }}</span>
                    </div>
                </Vue3Marquee>
            </div>
            <div class="right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
            </div>
        </div>
        <div class="center">
            <img src="@/assets/cz.png" alt="" class="cz">
            <img src="@/assets/cp.png" alt="" class="cp">
            <img :src="Lyrics.al.picUrl" alt="" class="arpic">
        </div>
    </div>
</template>

<script setup>
import {Vue3Marquee} from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { defineProps  } from 'vue';
const props =  defineProps(['Lyrics'])
console.log(props);

    
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    .bgimg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -999;
        filter: blur(1.5rem)
    }
    .top{
        width: 100%;
        height: 1rem;
        display: flex;
        padding: .2rem;
        justify-content: space-between;
        align-items: center;
        fill: #fff;
        .left{
            display: flex;
            align-items: center;
        }
        .marquee{
            width: 2.5rem;
            color: #fff;
        }
        .leftmarquee{
            width: 4rem;
            display: flex;
            height: 100%;
            margin-left: .4rem;
        }
    }
    .center{
        width: 100%;
        height: 9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .cz{
            width: 2rem;
            height: 3rem;
            position: absolute;
            left: 46%;
            transform-origin: 0 0;//原点
            transform: rotate(-10deg);
            transition: all 2s;
        }
        .cp{
            width: 5rem;
            height: 5rem;
            position: absolute;
            bottom: 2.3rem;
            z-index: -99;
        }
        .arpic{
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 50%;
            position: absolute;
            bottom: 3.14rem;
        }
    }
}
</style>